<template>
  <div id="mapContainer"></div>

  <ManageBaseMapPanel
    :show="showBaseMapPanel"
    :baseMaps="baseMaps"
    placement="right"
    @close="handleCloseBaseMapPanel"
    @pickBaseMap="hanlePickBaseMap">
    <ToolBar :config="toolbarConfig" @clickItem="handleClickItem" />
  </ManageBaseMapPanel>
</template>
<script setup>
import { Map, View } from "ol";
import { fromLonLat, get } from "ol/proj";

import { onMounted, nextTick, ref } from "vue";

import { tdt_api_key /** 天地图的key */ } from "@/config/keys.json";
import { addTdtBaseLayer } from "@/utils/baseMap.js";
import {
  getLayers,
  getLayerByName,
  findLayer,
  removeLayerBy,
  addLayers,
} from "@/utils/layer.js";

import ToolBar from "@/components/ToolBar.vue";
import ManageBaseMapPanel from "@/components/ManageBaseMapPanel.vue";

function initMap() {
  const map = new Map({
    view: new View({
      // projection: "EPSG:4326",
      // center: [114.5, 31],
      // center: [12744384.64, 3632718.39],
      center: fromLonLat([114.5, 31]),
      zoom: 9,
    }),
    target: "mapContainer",
  });

  // 加载底图
  addTdtBaseLayer(map, tdt_api_key, "img", "w", "wmts");

  // const projection = map.getView().getProjection();
  // console.log(map.getView().getProperties());
  // console.log(projection.getCode());
  // setProjection(map, "EPSG:4326");

  window.map = map;
}

onMounted(() => {
  nextTick(() => {
    initMap();
  });
});

// 工具栏配置
const toolbarConfig = ref([
  {
    id: "resetMap",
    name: "复位",
    icon: "/src/assets/images/toolbar/homeButton.svg",
  },
  {
    id: "baseMap",
    name: "底图切换",
    icon: `data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20aria-hidden='true'%20role='img'%20width='22'%20height='22'%20preserveAspectRatio='xMidYMid%20meet'%20viewBox='0%200%2064%2064'%3e%3cg%20transform='rotate(180%2032%2032)'%3e%3cpath%20fill='%23dfe9ef'%20d='M21.6%2056.6L2%2058.2L8.1%205l19-1.2z'/%3e%3cpath%20fill='%23bbc3c7'%20d='m43.4%2062l-21.8-5.4l5.5-52.8l13.8%206z'/%3e%3cpath%20fill='%23dfe9ef'%20d='M62%2055.2L43.4%2062L40.9%209.8l15-7.8z'/%3e%3cpath%20fill='%235df6ff'%20d='M22.1%2052.1L6.8%2053.3l4.7-44.8l15.2-.9z'/%3e%3cpath%20fill='%2300c0cf'%20d='m43.2%2058l-21.1-5.9l4.6-44.5l14.4%206z'/%3e%3cpath%20fill='%235df6ff'%20d='M57.9%2052.5L43.2%2058l-2.1-44.4L53%207.9z'/%3e%3cg%20opacity='.7'%3e%3cpath%20fill='%23f361f5'%20d='M21.6%2036c-.3.1-.6.3-.8.5l.1.1C19%2040.1%2022%2041.3%2022%2041.3c-1.2%206.1%201.3%208.1%201.3%208.1c-.6-4.6%203-7.6%203-7.6c1-4.7-3.3-5.6-4.7-5.8'/%3e%3cpath%20fill='%23edba53'%20d='M20.4%2035.6c-1.8-1.2-1.8-3.1-1.8-3.1c3%200%206.3-4.4%206.3-4.4c-2.2-7-3.1-1.1-3.1-1.1c-3.2-3.4.9-5%20.9-5c-2.5-1-3.6-3.8-3.6-3.8c-.1%201.8-.9%201.7-.9%201.7c-5.7-3.1-6.7%201.9-6.7%201.9c.9%202.7-1%203-1%203c1.9.3%202.9-2.1%202.9-2.1c3.9%201.8%201.8%208.4%201.8%208.4c1.5.8%201.9%203.6%201.9%203.6c1.1.3%202.1.9%202.9%201.4c.1-.3.2-.4.4-.5'/%3e%3cpath%20fill='%23eef8fb'%20d='M26.4%2016.1s-1.7-1.1-4.5.6c0%200-.7%206.3%204.5-.6'/%3e%3cpath%20fill='%235f5cff'%20d='M30.6%2017.5c-2.2-3.6-5.8%201.3-5.8%201.3c1.3%201%201.4%201.9%201.2%202.7c-.9%203%20.3%203.9.3%203.9c.7-2.5%203.1-2.9%203.1-2.9c-.3-2.3%201.2-5%201.2-5'/%3e%3cpath%20fill='%23ff7033'%20d='M36.7%2033.7c-.2.1-.4.1-.6%200c-.5-.5-.8-1.1-1.1-1.7c-.1-.1-.1-.2-.1-.3c-1.7-.6-5-1.2-5.5%203.4c0%200%20.6%203.1%202.7%201.5c0%200%202.3.4%201.4%204.5c0%200%20.4%203.2%202.4%202.9c0%200%20.5-4.6%203.1-8.2c-.1.1-1.1%201.1-2.3-2.1'/%3e%3cpath%20fill='%236c732d'%20d='M53.3%2018.1s-4.9%201.7-10.3%201.2c0%200%20.5-1.6-1.4-1.8c0%200-2.5%203-1.4%204.7c0%200-.5%203-1.1-1.4c0%200-1%202.6-2.5%202c0%200-.4%202.6-1.3.9c0%200%20.7.3.9-.5c0%200-2.1-2.1-3.3%201.1c0%200-1%20.4-.6%201.8c0%200%20.7-1.2%201.1.6c0%200%20.4-.3.5-2.6c0%200%201-.5.2%201.4c0%200%202.2%200-1.2%201.9c0%200-.2%200-.3-.7c0%200-.5%201.7-1.6%202.3c0%200%20.3.7-.5%201c0%200-.4%201.1.6%201.1c0%200%20.9-2.5%202.6-.5c0%200%20.3-.1-.2-1.1c0%200%20.9.3%201.2%201.6c0%200%20.5-.1.6-1.2c0%200%20.7-1.5%201.8.3c0%200-1.5-.4-1.9%201c0%200%20.7-.3%201.1.1c0%200%200%20.7-.4.9c.2.3.4.7.7.9c.2.2.2.4.1.6c.8%201.3%202.2%202.9%203.3.3c0%200-1.4.7-1.8-1.3c0%200%203.5.4%204.4%203.9c0%200%201-.7%201.3-3c0%200%201.2.1%202.6%203c0%200%20.6-.1.3-2c0%200%202.3-.9%201-4.6c0%200%201.9%202.5%201.3-.7c0%200%202.1-2.4-.4-4c0%200%20.1-1.8%201.6-1.5c0%200%201.5-3.7.8.7c0%200%200%20.9%201%201.8c0%200%20.4-1.4-.3-3c.2-.2%201.7-2.9%201.5-5.2'/%3e%3cpath%20fill='%23f361f5'%20d='M31.9%2027.8c.4-.9-.9-1.8-.9-1.8c.2%202%20.5%202.6.9%201.8m-1.6.1s.6-.1.5-.8c0%200-.5%200-.5.8m-.2-4.1s-1.6%200-1%20.8c.5.7%201-.8%201-.8'/%3e%3cpath%20fill='%23edff54'%20d='M38.2%2042.5s.5-.9.5-2.4c0%200-1.6%201.7-.5%202.4'/%3e%3cpath%20fill='%23eef8fb'%20d='M48.4%2036.6s-1.1%201-.9%201.9c.2.9%201.2-.2.9-1.9'/%3e%3cpath%20fill='%23edff54'%20d='M53%2039.8c.5-.8-2.7-1.8-2.7-1.8c.6.8%202.2%202.5%202.7%201.8'/%3e%3cpath%20fill='%23f361f5'%20d='M49.3%2039.9c.8-1.2-2.3-.6-2.3-.6s2%201.1%202.3.6'/%3e%3cpath%20fill='%23f33'%20d='M50.5%2040.2s-.6%201.3-2.9%201.8c0%200%20.5%201%200%203c0%200%202.3-2.7%203.6%201.2c0%200%201.1.6%201.9-3c0%200-1-1.3-1.3-3.1c.1%200-.2%202.3-1.3.1m-1-8.7s2.6-.9%201.5-3c.1-.1.3-.2.3-.2c-1.1-1.7-.7.7-.7.7c.1-.2.2-.3.2-.4c0%20.8-.1%201.9-1.3%202.9m-26.9-8s1.9%202.7%202.1-.3c.1-.7-.2-.8-.5-.8c-.1-2-1.5-2.6-1.5-2.6c-.9.5-.8%201.2-.8%201.2c.8.1%201.3%201.1%201.6%201.9c-.1.3-.4.6-.9.6'/%3e%3cpath%20fill='%23edff54'%20d='M31.3%2015.9c.6-1.2-1.2-2.6-1.2-2.6c.2%202.9.6%203.8%201.2%202.6'/%3e%3cpath%20fill='%23fff'%20d='M29.8%2014.8s-.7.1-.7%201.2c0%200%20.9-.1.7-1.2'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e`,
    active: false,
  },
  {
    id: "fullScreen",
    name: "全屏",
    icon: "/src/assets/images/toolbar/fullscreenButton.svg",
  },
  {
    id: "zoomIn",
    name: "放大",
    icon: "/src/assets/images/toolbar/zoom-in.svg",
  },
  {
    id: "zoomOut",
    name: "缩小",
    icon: "/src/assets/images/toolbar/zoom-out.svg",
  },
  {
    id: "layers",
    name: "图层管理",
    icon: "/src/assets/images/toolbar/layers.svg",
  },
]);
function handleClickItem(item) {
  if (item.id == "baseMap") {
    showBaseMapPanel.value = !showBaseMapPanel.value;
    toolbarConfig.value.find(el => el.id == item.id).active = !item.active;
  }
}

//显示地图切换面板
const showBaseMapPanel = ref(false);
//
const baseMaps = ref([
  {
    id: "tdt_img_w",
    name: "天地图影像(EPSG:3857)",
    image: "/src/assets/images/baseMapPanel/tdt_img.png",
    default: true,
  },
  {
    id: "tdt_vec_w",
    name: "天地图矢量(EPSG:3857)",
    image: "/src/assets/images/baseMapPanel/tdt_vec.png",
  },
  {
    id: "tdt_ter_w",
    name: "天地图地形(EPSG:3857)",
    image: "/src/assets/images/baseMapPanel/tdt_ter.png",
  },
  {
    id: "tdt_img_c",
    name: "天地图影像(EPSG:4326)",
    image: "/src/assets/images/baseMapPanel/tdt_img.png",
  },
  {
    id: "tdt_vec_c",
    name: "天地图矢量(EPSG:4326)",
    image: "/src/assets/images/baseMapPanel/tdt_vec.png",
  },
  {
    id: "tdt_ter_c",
    name: "天地图地形(EPSG:4326)",
    image: "/src/assets/images/baseMapPanel/tdt_ter.png",
  },
]);

function handleCloseBaseMapPanel(item) {
  showBaseMapPanel.value = false;
  toolbarConfig.value.find(el => el.id == "baseMap").active = false;
}

// 地图选择事件的回调
function hanlePickBaseMap(newItem, oldItem) {
  if (oldItem) {
    const layerId = oldItem.id;
    const markerId = layerId.replace(
      /(?<=tdt_)(\w+)(?=_[c|w])/,
      `c${layerId.split("_")[1].charAt(0)}a`
    );

    removeLayerBy(
      window.map,
      layer => layer.id == layerId || layer.id == markerId
    );
  }

  // 加载新图层
  addTdtBaseLayer(
    window.map,
    tdt_api_key,
    newItem.id.split("_")[1],
    newItem.id.split("_")[2]
  );
}
</script>

<style scoped>
#mapContainer {
  width: 100%;
  height: 99vh;
}
</style>
